$blue: #387ef5;
$orange: #ffc900;
$red: #e43e56;
$sblue: #0894ec;
$white: #fff;
$green:#66cccc;


*{
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input,textarea{
  -webkit-user-select: auto;
  user-select:text;
}

html,body{
  height: 100%;
}

.mr5{
  margin-right: .5rem;
}
.ml5{
  margin-left: .5rem;
}
.mt5{
  margin-top: .5rem;
}
.mb5{
  margin-bottom: .5rem;
}

.bar_tab_1{
  z-index: 2001;
  background: $white;
  color: $blue;
  font-weight: 600;
}

.content_1{
  bottom:2.5rem;
}

.item-link_1{
  .item-inner{
    .item-title{
      margin: 0 auto;
    }
  }
}

.content-block_1,.list-block_1{
  .item-content:active{
    background: #eee;
  }
  margin: 0;
  padding:0;
  position: relative;
  top: 1rem;
}

.item-media_1{
  img{
    width: 5rem;
  }
}
.item-title_1{
  white-space: pre-wrap!important;
}

.buttons_tab_1{
  position: absolute;
  top: 2.2rem;
  width: 100%;
  z-index: 2002;
}

.list-item:active,.list-link:active,.item-link_1:active{
  background: #eee;
}

.pull-to-refresh-layer_1{
  top: 2.2rem !important;
}

/**
 * swiper 样式修改
 */

.swiper-container {
  width: 100%;
  height: 10rem;
  padding-bottom: .5rem;
  .swiper-pagination-bullet-active {
    background: #fff;
  }
  .swiper-slide img {
    width: 100%;
    height: 100%;
  }
}
.swiper-container-horizontal > .swiper-pagination {
  bottom: .5rem;
}

/* 登录页 */
#login,#version{
  .logo{
    text-align: center;
    margin-top: 1rem;
    i{
      font-size: 6rem;
      display: block;
      color: $red;
    }
  }
  .list-block{
    margin: 1.75rem .75rem;
    ul{
      border-radius: .5rem;
    }
  }
  .login_row{
    margin: 0;
    a{
      background: $blue;
    }
    a:active{
      background: $sblue;
    }
  }
  .partion{
    text-align: center;
    span{
      margin: 0 4rem;
    }
    a{
      color: $blue;
    }
    a:active{
      color: $sblue;
    }
  }
  .list-block .item-title.label{
    width: 30%;
  }
}
//.popup-register,.popup-forget,.popup-doctor{
//  .title{
//    background: transparent;
//    color: #3d4145;
//  }
//}


/** 修改标题栏 **/
.title{background: $blue;color:$white;}
.back{color: $white!important;}

/** 功能区 **/
#list{
  background: #fff;
  .row{
    margin: 0;
    .list-item{
      width: 50%;
      margin: 0;
      height: 3.75rem;
      box-sizing: border-box;
      color: #000;
      i{
        font-size: 1.5rem;
        line-height: 2.5rem;
        margin: 0.625rem 0 0 1rem;
        width: 2.5rem;
        border-radius: 50%;
        text-align: center;
        color: $white;
      }
      span{
        position: relative;
        top: .5rem;
        left: .5rem;
      }
      @media screen  and (max-width: 320px) {
        span{
          position: relative;
          top: .5rem;
          left: .25rem;
        }
      }
    }
  }
  /** 图标设置 **/
  .row:nth-child(1) {
    border-bottom: solid 1px #eee;
    .list-item:nth-child(1){
      border-right: solid 1px #eee;
      i{background: $orange;}
    }
    .list-item:nth-child(2) i{
      background: $blue;
    }
  }
  .row:nth-child(2) {
    .list-item:nth-child(1){
      border-right: solid 1px #eee;
      i{background: $red;}
    }
    .list-item:nth-child(2) i{
      background: $sblue;
    }
  }
}

/**
 *  推荐医生
 */
#recommendDoc{
  .recommmendTitle{
    width: 100%;
    line-height: 1rem;
    margin: .5rem 0 0 0;
    padding: .5rem .625rem;
    background: #fff;
  }
  .recommendItem{
    margin: 0;
    border-bottom: solid 1px #eee;
  }
}

/**
 * 医院模块
 */
#hospital{
  .hospIntro{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-indent: 1.5rem;
  }
  .hospIntroAll{
    -webkit-line-clamp: 5;
  }
}
/**
 * 个人信息
 */
#myintro{
  .avator{
    width: 100%;
    height: 35%;
    color: $white;
    background-color: $blue;
    text-align: center;
    img{
      width: 5rem;
      height: 5rem;
      position: relative;
      top: 2rem;
    }
    div{
      position: relative;
      top: 3rem;
    }
  }
  .list{
    .list-block{
      margin: 0 0 0.75rem 0;
    }
  }
}

/**
 * 预约挂号
 */
#appointment{
  .content_2{
    top: 1.2rem;
    .list-block{
      margin: 1.5rem 0 0 0;
      .item-text{
        height: 1.2rem;
      }
      .item-center{
        margin:0 auto;
      }
      .item-inner:active{
        background: #eee;
      }
    }
    .list-block_1{
      margin:0;
    }
  }
}
#doctorlist{
  .btn-group{
    overflow: auto;
    a{
      height: 3rem;
      line-height: 1.5rem;
    }
  }
  #listcontent{
    margin: 1rem 0.75rem;
    ul{  margin-top: .5rem;  }
  }
}

#doctordetail{
  .card{
    box-shadow: none;
    border-radius: .3rem;
  }
  .inset{
    margin: .5rem;
    ul{
      margin: .5rem 0;
      li{
        .item-subtitle{
          white-space: pre-wrap;
        }
      }
    }
  }
}

#searchdoc{
  .bar-header-secondary {
    top: 2.1rem;
  }
  .searchbar {
    background: #387ef5;
    .searchbar-cancel{
      color: #ffffff;
    }
  }
  .content_2{
    top: 4rem;
    .content-block-title{
      font-size: .8rem;
    }
  }
}

#searchresult{
  .layCenter{
    text-align: center;
    position: relative;
    top: 30%;
    img{
      width: 5rem;
    }
    h1{
      color: #bbb;
      font-size: 1rem;
    }
  }
}

#examine{
  .content{
    .partlist{
      margin: 0;
      .list-group-title{
        color:#bbb;
      }
    }
  }
}
#examineresult{
  height: 31.125rem;
  width: 18.75rem;
}

/* * * * * * * * * * * * * * * * * * * * * * *  医生端 * * * * * * * * * * * * * * * * * * * * * * * */
//#doctor,#manager,#setting,#addappointment,#calendar,#healtheducation,#help,#version {
//  .title,
//}
.title_1 {
  background: $green;
  color: $white;
}
#doctor{
  /** 功能区 **/
  #list{
    background: #fff;
    .row{
      margin: 0;
      display:-webkit-box;
      display:-webkit-flex;
      display: flex;
      .list-item{
        //width: 50%;
        //margin: 0;
        height: 5.75rem;
        box-sizing: border-box;
        color: #000;
        i{
          font-size: 1.5rem;
          line-height: 2.5rem;
          margin: 1rem 29% 0;
          width: 2.5rem;
          border-radius: 50%;
          text-align: center;
          color: $white;
        }
        span{
          position: relative;
          top: .5rem;
          left: 1.25rem;
        }
        @media screen  and (max-width: 320px) {
          span{
            position: relative;
            top: .5rem;
            left: 1rem;
          }
        }
      }
    }
    /** 图标设置 **/
    .list-item:nth-child(1){
      border-right: solid 1px #eee;
      i{  background: $orange;}
    }
    .list-item:nth-child(2) {
      border-right: solid 1px #eee;
      i{  background: $blue;  }
    }
    .list-item:nth-child(3) {
      i{
        background: $red;
      }
    }
  }
}
.bar_tab_2{
  z-index: 2001;
  background: $white;
  color: $green;
  font-weight: 600;
  .tab-item.active{
    color: $green;
  }
}
#setting{
  .list-block_2{
    margin:9.75rem 0 0 0;
  }
  .list-block_3{
    margin: 1.25rem 0;
  }
}

#calendar{
  #calendardetail{
    .icon-only{  visibility: hidden;  }
    .active{
      background:#e43e56;
      color:#fff
    }
    .active.selected{
      border:1px solid #e43e56;
      color: #e43e56;
      background: transparent;
    }
  }
  #datelist{
    ul{  margin-top: .5rem;  }
  }
}

#addappointment{
  #submitappointment{
    margin: 2rem .5rem;
  }
}
.icon-only{
  visibility: hidden;
}
#concern,#manager,#mycase,#doctormanage,#officemanager,#patientmanager,#bannermanage {
  .button-green {
    border: 1px solid #66cccc;
    color: #66cccc;
    padding: 0.25rem 1rem;
    border-radius: .25rem;
  }
  .button-green:active {
    border: 1px solid #66cccc;
    background:#66cccc ;
    color: #fff;
  }
  .button-orange {
    border: 1px solid #f60;
    color: #f60;
    padding: 0.25rem 1rem;
    border-radius: .25rem;
  }
  .button-orange:active {
    border: 1px solid #f60;
    background:#f60 ;
    color: #fff;
  }
  .button-red {
    border: 1px solid #e43e56;
    color: #e43e56;
    padding: 0.25rem 1rem;
    border-radius: .25rem;
  }
  .button-red:active {
    border: 1px solid #e43e56;
    background:#e43e56 ;
    color: #fff;
  }
  .button-grey{
    border: 1px solid #bbb;
    color: #bbb;
  }
  .button-grey:active{
    background: #bbb;
    color: #fff;
  }
  .layCenter{
    text-align: center;
    position: relative;
    top: 30%;
    img{
      width: 5rem;
    }
    h1{
      color: #bbb;
      font-size: 1rem;
    }
  }
  .caseresult{
    padding: 0;
  }
}
#editintro,#modifypsd{
  [name=editintro]{
    padding-left: 0;
  }
  #submiteditintro,#confirmModify{
    margin: 2rem .5rem;
  }
}

@media only screen and (min-width: 980px) {
  #login {
    width: 30%;
    margin: 0 auto;
  }
  #manager,#doctormanage,#officemanager,#patientmanager,#infomanage,#bannermanage{
    .content{
      display:-webkit-box;
      display:-webkit-flex;
      display: flex;
      .panel{
        display: block;
        position: relative;
        .list-block{
          .list-block{
            ul{
              li:hover{
                background: #efeff4;
                .item-title{
                  color: #111;
                }
              }
              li.active{
                background: #efeff4;
                .item-title{
                  color: #111;
                }
              }
              li{
                .item-inner::after{
                  height: 0px;
                }
              }
            }
            .exit{
              position: absolute;
              bottom: 1rem;
              width: 80%;
              margin: 1rem;
              color: #ccc;
            }
            .exit:active,.exit:hover{
              background: #efeff4;
              color: #5f646e;
              border: none;
            }
          }
        }
      }
      .m_content{
        -webkit-box-flex:1;
        -webkit-flex:1;
        flex:1;
        overflow: hidden;
        .buttons-tab{
          .button{
            width: 6rem;
            height: 3rem;
            line-height: 3rem;
            border: none;
          }
          .button.active{
            span{
              border-bottom: 2px solid #0894ec;
              line-height: inherit;
              height: inherit;
              display: inline-block;
            }
          }
        }
        .content-block{
          margin: 0.75rem 0;
        }
        .searchbar{
          width: 30rem;
          margin: 0 auto;
        }
        .list-block{
          margin: 0.75rem 0;
          .item-title.label{
            width: 5rem;
          }
          textarea{
            padding-top: 0.6rem;
          }
          .item-title{
            width: 6rem;
            display:-webkit-box;
            display:-webkit-flex;
            display: flex;
            .button-green,.button-red,.button-grey{
              padding:0 .5rem;
              margin: 0 .2rem;

            }
          }
          .item-inner{
            min-height: 2.5rem;
          }
        }
        .tab-content{
          ul{
            max-height: 27.5rem;
            overflow: auto;
          }
          ul.searchresult{
            max-height: 25rem;
          }
        }
      }
    }
  }
  .editdoctor,.editappoint{
    width: 25rem;
    transform: translate(-15%,-5%)!important;
    .list-block{
      margin:0;
    }
  }
  #doctormanage{
    #d_info{
      width: 22rem;
      margin: 0 auto;
    }
  }
  #officemanager{
    .content {
      .m_content {
        .office-content{
          width: 100%;
          position: relative;
          .content-block{
            width: 50%;
          }
          .add-department{
            position: absolute;
            right: 5%;
            background: #fff;
            margin: 0;
            top: 35%;
            width: 40%;
            text-align: center;
            .content-block{
              width: 100%;
              margin: .5rem auto;
              display:-webkit-box;
              display:-webkit-flex;
              display: flex;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              justify-content: space-between;
              .col-50{
                width: 45%;
              }
            }
          }
        }
        .tab-content {
          ul{
            max-height: 25rem;
            overflow: auto;
          }
        }
      }
    }
  }
  #infomanage{
    #s_hospital{
      width: 60%;
    }
    textarea{
      height: 20rem;
    }
    p {
      margin: 1rem;
    }
  }
  #manager{
    .echars-content{
      height: 31rem;
      #countAppoint{
        width: 100%;
        height: 7rem;
      }
      #todayTime,#weekTime{
        width: 100%;
        height: 12rem;
      }
    }
    #countDepart{
      height: 31rem;
      width: 100%;
    }
  }
}
#healtheducation{
  .buttons-tab{
    .button.active{
      color: #66cccc;
      border-color: #66cccc;
    }
  }
}
#bannermanage{
  /*蓝色按钮,绝对定位*/
  .blueButton,.submit_btn
  {
    position: absolute;
    display: block;
    width: 100px;
    height: 40px;
    background-color: $blue;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font:normal normal normal 16px/40px 'Microsoft YaHei';
    cursor: pointer;
    border-radius: 4px;
  }
  .blueButton:hover
  {
    text-decoration: none;
    cursor: pointer;
  }
  /*自定义上传,位置大小都和a完全一样,而且完全透明*/
  .myFileUpload
  {
    position: absolute;
    display: block;
    width: 100px;
    height: 40px;
    opacity: 0;
    cursor: pointer;
  }
  /*显示上传文件夹名的Div*/
  .show
  {
    position: absolute;
    top: 4rem;
    left: 18rem;
    height: 30px;
    font:normal normal normal 14px/30px 'Microsoft YaHei';
    display: inline;
  }
  .submit_btn{
    left: 30rem;
    background-color: $orange;
    border: none;
  }
  .clear_btn{
    left:35rem;
    background: $red;
  }
  iframe{
    display: block;
    width: 40rem;
    height: 27rem;
    overflow: hidden;
    border: none;
    position: absolute;
    top: 6rem;
  }
}